<template>
  <div class="bank-card-form">
    <h2>填写银行卡信息</h2>
    
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="cardHolder">持卡人姓名</label>
        <input type="text" id="cardHolder" v-model="cardInfo.cardHolder" placeholder="请输入持卡人姓名" required />
        <span v-if="errors.cardHolder" class="error-message">{{ errors.cardHolder }}</span>
      </div>

      <div class="form-group">
        <label for="cardNumber">银行卡号</label>
        <input type="text" id="cardNumber" v-model="cardInfo.cardNumber" placeholder="请输入银行卡号" required />
        <span v-if="errors.cardNumber" class="error-message">{{ errors.cardNumber }}</span>
      </div>

      <div class="form-group">
        <label for="expiryDate">有效期 (MM/YY)</label>
        <input type="text" id="expiryDate" v-model="cardInfo.expiryDate" placeholder="MM/YY" required />
        <span v-if="errors.expiryDate" class="error-message">{{ errors.expiryDate }}</span>
      </div>

      <div class="form-group">
        <label for="cvv">CVV</label>
        <input type="text" id="cvv" v-model="cardInfo.cvv" placeholder="请输入CVV" required />
        <span v-if="errors.cvv" class="error-message">{{ errors.cvv }}</span>
      </div>

      <div class="form-group">
		  <router-link to="/pages/mine/mine">
        <button type="submit" :disabled="isSubmitting">提交</button>
		</router-link>
      </div>
    </form>

    <div v-if="submitted" class="success-message">
      银行卡信息提交成功！
    </div>
  </div>
</template>
<style scoped>
.bank-card-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

input[type="text"]:focus {
  border-color: #3498db;
  outline: none;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 10px;
  cursor: pointer;
}

button:disabled {
  background-color: #ddd;
}

.error-message {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 5px;
}

.success-message {
  margin-top: 20px;
  text-align: center;
  color: #2ecc71;
  font-size: 18px;
}
</style>

this.$router.replace('/pages/mine/mine"')
<script>
export default {
  data() {
    return {
      cardInfo: {
        cardHolder: '',
        cardNumber: '',
        expiryDate: '',
        cvv: ''
      },
      errors: {},
      isSubmitting: false,
      submitted: false
    };
  },
  methods: {
    // 提交表单
    submitForm() {
      this.errors = {}; // 清空之前的错误信息
      if (this.validateForm()) {
        this.isSubmitting = true;

        // 模拟表单提交
        setTimeout(() => {
          this.isSubmitting = false;
          this.submitted = true;
          this.resetForm();
        }, 1000);
      }
    },

    // 验证表单
    validateForm() {
      let valid = true;

      if (!this.cardInfo.cardHolder) {
        this.errors.cardHolder = '持卡人姓名不能为空';
        valid = false;
      }

      if (!this.cardInfo.cardNumber) {
        this.errors.cardNumber = '银行卡号不能为空';
      } else if (!/^\d{16,19}$/.test(this.cardInfo.cardNumber)) {
        this.errors.cardNumber = '请输入有效的银行卡号';
        valid = false;
      }

      if (!this.cardInfo.expiryDate) {
        this.errors.expiryDate = '有效期不能为空';
      } else if (!/^(0[1-9]|1[0-2])\/\d{2}$/.test(this.cardInfo.expiryDate)) {
        this.errors.expiryDate = '请输入有效的有效期（MM/YY）';
        valid = false;
      }

      if (!this.cardInfo.cvv) {
        this.errors.cvv = 'CVV不能为空';
      } else if (!/^\d{3,4}$/.test(this.cardInfo.cvv)) {
        this.errors.cvv = '请输入有效的CVV';
        valid = false;
      }

      return valid;
    },

    // 重置表单
    resetForm() {
      this.cardInfo = {
        cardHolder: '',
        cardNumber: '',
        expiryDate: '',
        cvv: ''
      };
    }
  }
};
</script>
